<template>
  <div v-loading="loading" class="app-container">
    <el-button type="primary" plain style="margin-bottom:10px" @click="back">返回</el-button>
    <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        class="search-form-new"
        label-width="80px"
      >
      <!-- <el-form-item label="监控类型" prop="monitorTaskType">
          <el-select clearable v-model="queryParams.monitorTaskType">
            <el-option
              :label="item.label"
              :value="key"
              v-for="(item,key) in taskTypeOptions"
              :key="key"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="店铺" prop="tenantId" v-hasPermi="['searchTenantID']">
          <el-select v-model="queryParams.tenantId" placeholder="请选择店铺" clearable filterable>
            <el-option v-for="dict in tenantList" :key="dict.tenantId" :label="dict.tenantName" :value="dict.tenantId" />
          </el-select>
        </el-form-item>
        <el-form-item label="游戏账号" prop="accountNumber">
          <el-input
            v-model="queryParams.accountNumber"
            placeholder="请输入"
            clearable
          />
        </el-form-item>
        <el-form-item label="商品编号" prop="goodsId">
          <el-input
            v-model="queryParams.goodsId"
            placeholder="请输入"
            clearable
          />
        </el-form-item>
        <el-form-item class="btns">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="search"
            >搜索</el-button
          >
          <el-button
            icon="el-icon-refresh"
            type="warning"
            @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <div class="table_box">
        <el-table
          stripe
          :data="tableData.records"
          style="width: 100%"
        >
          <el-table-column label="ID" width="80" label-position="left">
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="所属店铺" prop="tenantName" />
          <el-table-column label="监控类型"  >
            <template slot-scope="scope">
              <span>{{ taskTypeOptions[scope.row.monitorTaskType].label  }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="游戏名称" prop="gameName"  /> -->
          <el-table-column label="商品编号" prop="goodsId"  />
          
          <!-- <el-table-column label="checkId" prop="queryId" width="100" /> -->
          <el-table-column label="游戏账号" prop="accountNumber"  width="120"/>
          <el-table-column label="自编号" prop="thirdId"  width="120"/>
          
          <el-table-column label="手机号" prop="telephone"  width="120"/>
          <el-table-column label="账号状态" prop="status">
            <template slot-scope="scope">
              <span
                v-show="scope.row.status == '0'"
                style="color: rgb(64, 206, 7)"
                >正常</span>
              <span v-show="scope.row.status == '1'&&scope.row.monitorTaskType==2" style="color: red"
                >转手</span>
                <span v-show="scope.row.status == '1'&&scope.row.monitorTaskType==1" style="color: red"
                >掉绑</span>
              <span v-show="scope.row.status == '2'" style="color: orange"
                >二变无</span>
              <span
                v-show="scope.row.status == '3'"
                style="color: rgb(255, 81, 0)"
                >今日上限</span>
              <span v-show="scope.row.status == '4'" style="color: red"
                >账号错误</span>
            </template>
          </el-table-column>
       
          <el-table-column label="查询结果" prop="bindTel"  />
          <el-table-column label="查询时间" prop="createTime" width="160" />
          <el-table-column label="处理时间" prop="updateTime" width="160" />
     
          <!-- <el-table-column label="检查完成时间" prop="taskCompleteTime" width="160"/> -->
          <!-- <el-table-column label="备注" prop="remark" v-if="queryParams.monitorTaskType==1"/> -->
          <el-table-column label="操作"  min-width="120">
            <template slot-scope="scope">
              <el-button v-hasPermi="['jiankong:chulidiaobang']" type="primary" size="mini" v-if="scope.row.handleType==1"  @click="chuli(scope.row)">处理</el-button>
              <span type="add" v-if="scope.row.handleType==2&&scope.row.monitorTaskType==1"  >已处理，转为在绑并继续监控</span>
              <span type="add" v-if="scope.row.handleType==3&&scope.row.monitorTaskType==1"  >已处理，转为在绑不监控</span>
              <span type="add" v-if="scope.row.handleType==4"  >已处理，转为问题号</span>
              <span type="add" v-if="scope.row.handleType==2&&scope.row.monitorTaskType==2"  >已处理，继续监控</span>
              <span type="add" v-if="scope.row.handleType==3&&scope.row.monitorTaskType==2"  >已处理，不监控</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="pages-box">
          <pagination v-show="tableData.total > 0" :total="tableData.total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                  @pagination="getList" />
        </div>
      </div>
      <el-dialog
        :title="dialogTit"
        :visible.sync="dialogVisible"
        @close="closeruleForm"
        width="600px">
        <div>
          <el-form
            :model="ruleForm"
            ref="ruleForm"
            label-width="auto"
            :rules="rules"
            class="demo-ruleForm"
          >
            <el-form-item label="处理结果:" prop="handleType">
              <el-select
              v-if="ruleForm.monitorTaskType==1"
                v-model="ruleForm.handleType"
                placeholder="选择处理结果"
                style="width: 250px"
                clearable
              >
                <el-option
                  v-for="(value, key) in handleTypeOptions"
                  :key="key"
                  :label="value.name"
                  :value="value.value"
                ></el-option>
              </el-select>

              <el-select
              v-if="ruleForm.monitorTaskType==2"
                v-model="ruleForm.handleType"
                placeholder="选择处理结果"
                style="width: 250px"
                clearable
              >
                <el-option
                  v-for="(value, key) in handleTypeOptions2"
                  :key="key"
                  :label="value.name"
                  :value="value.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注:" prop="remark">
              <el-input
                style="width: 400px"
                v-model="ruleForm.remark"
                type="textarea"
                rows="5"
                placeholder="请输入备注..."
              ></el-input>
            </el-form-item>
           
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer center" >
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </el-dialog>



    </div>
</template>
<script>
import checkPhoneApi from "@/api/gameConfig/checkPhonePx";
export default {
  name: "CheckPhoneErrorRecords",
  data() {
    return {
      dialogTit:'掉绑处理',
      loading: false,
      tableData: {
        records: [],
        total: 0,
      },
      taskTypeOptions:
      {
        1:{
          label: "掉绑监控",
          value: "1",
          type:'success'
        },
        2:{
          label: "转手监控",
          value: "2",
          type:'danger'
        }
      },
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        goodsId: "",
        accountNumber: "",
        monitorTaskType:'',
        monitorTaskId:''
      },

      dialogVisible:false,
      dialogVisible2:false,
      ruleForm:{
        id:'',
        monitorTaskType:'',
        handleType:'',
        remark:''
      },
      rules: {
        handleType: [
          { required: true, message: "请选择", trigger: "change" },
        ]
      },
      handleTypeOptions:[
        {
          name:'转为在绑并继续监控',
          value:2
        },
        {
          name:'转为在绑不监控',
          value:3
        },
        {
          name:'转为问题号',
          value:4
        },
        // 2正常并加入监控 3正常不加入监控 4转问题号
      ],
      handleTypeOptions2:[
        {
          name:'继续监控',
          value:2
        },
        {
          name:'不监控',
          value:3
        },
        // {
        //   name:'转为问题号',
        //   value:4
        // },
      ]
    };
  },
  // watch: {
  //   $route: {
  //     handler: function (route) {
  //       if(route.path=='/tenantUtils/checkPhoneErrorRecords'&&route.query && route.query.monitorTaskType){
  //         this.queryParams.monitorTaskType = route.query.monitorTaskType
  //         this.queryParams.monitorTaskId = route.query.monitorTaskId
  //         this.getList()
  //       }
  //     },
  //     immediate: true,
  //     deep:true
  //   }
  // },
  created() {
    if(this.$route.path=='/tenantUtils/checkPhoneErrorRecords'&&this.$route.query && this.$route.query.monitorTaskType){
          this.queryParams.monitorTaskType = this.$route.query.monitorTaskType
          this.queryParams.monitorTaskId = this.$route.query.monitorTaskId
          this.getList()
        }
  },
  computed: {
    tenantList() {
      return this.$store.getters.tenantList
    }
  },
  methods: {
    // 返回
    back(){
      window.history.go(-1)
    },
    // 处理掉绑
    chuli(row){
      this.ruleForm.id = row.id
      this.ruleForm.monitorTaskType = row.monitorTaskType
      this.dialogTit = '掉绑处理'
      if(this.ruleForm.monitorTaskType==2){
        this.dialogTit = '转手处理'
      }
      this.dialogVisible = true
    },
    // 提交处理结果
    submitForm(){
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          checkPhoneApi.monitorTaskErrhandle(this.ruleForm).then(res=>{
            this.$message.success('操作成功！')
            this.dialogVisible = false
            this.getList()
          })
        }
      })
    },
    // 关闭弹窗
    closeruleForm(){
      this.resetForm('ruleForm')
    },
    // 获取列表
    getList() {
      this.tableData.records = [];
      this.loading = true;
        checkPhoneApi
          .monitorTaskErrlist(this.queryParams)
          .then((response) => {
            this.loading = false;
            this.tableData.records = response.rows;
            this.tableData.total = response.total;
          })
          .catch((err) => {
            this.loading = false;
          });
    },
    search(){
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery(){
      this.queryParams = {
        pageNum: 1,
        pageSize: 20,
        goodsId: "",
        accountNumber: "",
        monitorTaskType:''
      }
      this.getList()
    },
    close() {
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped lang="css">

</style>
